<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeX - 多功能代码渲染器</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="stylesheet" id="highlight-theme" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #1e1f29, #2c3e50);
            color: #e0e0e0;
            line-height: 1.6;
            padding-bottom: 30px;
            min-height: 100vh;
        }
        
        :root {
            --primary-color: #3498db;
            --secondary-color: #2c3e50;
            --accent-color: #9b59b6;
            --bg-color: #1e1f29;
            --card-bg: #252836;
            --text-color: #e0e0e0;
            --border-color: #3a3d4d;
            --success-color: #2ecc71;
            --warning-color: #f39c12;
            --header-height: 60px;
            --border-radius: 10px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }
        
        header {
            background: rgba(30, 31, 41, 0.8);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            padding: 15px 0;
            position: sticky;
            top: 0;
            z-index: 100;
            border-bottom: 1px solid var(--border-color);
        }
        
        header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .logo-icon {
            width: 40px;
            height: 40px;
            background: var(--primary-color);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 20px;
            color: white;
        }
        
        .logo h1 {
            font-size: 24px;
            color: white;
            background: linear-gradient(to right, #3498db, #9b59b6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .tagline {
            text-align: center;
            color: #bbb;
            font-size: 16px;
            margin-top: 5px;
        }
        
        .main-content {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 30px;
        }
        
        .editor-panel, .preview-panel {
            flex: 1;
            min-width: 300px;
            background: var(--card-bg);
            border-radius: var(--border-radius);
            padding: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            border: 1px solid var(--border-color);
        }
        
        .panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .panel-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--primary-color);
        }
        
        .controls {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }
        
        select, button {
            padding: 8px 12px;
            border-radius: 6px;
            border: 1px solid var(--border-color);
            background: #2d2f3f;
            color: var(--text-color);
            font-size: 14px;
            outline: none;
            transition: all 0.3s;
        }
        
        select:focus, button:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.3);
        }
        
        button {
            background: var(--primary-color);
            color: white;
            border: none;
            cursor: pointer;
            font-weight: 500;
            padding: 8px 16px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        button:hover {
            background: #2980b9;
            transform: translateY(-2px);
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
        }
        
        button.copy-btn {
            background: var(--success-color);
        }
        
        button.copy-btn:hover {
            background: #27ae60;
        }
        
        button.reset-btn {
            background: var(--warning-color);
        }
        
        button.reset-btn:hover {
            background: #e67e22;
        }
        
        textarea {
            width: 100%;
            min-height: 300px;
            padding: 15px;
            background: #2d2f3f;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            color: var(--text-color);
            font-family: 'Consolas', 'Courier New', monospace;
            font-size: 15px;
            resize: vertical;
            transition: all 0.3s;
        }
        
        textarea:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.3);
        }
        
        pre {
            margin: 0;
            padding: 15px;
            border-radius: var(--border-radius);
            background: #2d2f3f;
            border: 1px solid var(--border-color);
            overflow-x: auto;
            min-height: 300px;
        }
        
        #output {
            padding: 0;
            margin: 0;
            background: transparent;
            border: none;
        }
        
        .theme-preview {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 30px;
        }
        
        .theme-card {
            width: calc(33.333% - 10px);
            min-width: 150px;
            background: var(--card-bg);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            cursor: pointer;
            transition: all 0.3s;
            border: 2px solid transparent;
        }
        
        .theme-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
        }
        
        .theme-card.active {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.3);
        }
        
        .theme-preview-box {
            height: 80px;
        }
        
        .theme-name {
            padding: 10px;
            text-align: center;
            font-size: 14px;
            background: #33354a;
            color: #ccc;
            font-weight: 500;
        }
        
        .notification {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: var(--success-color);
            color: white;
            padding: 12px 24px;
            border-radius: var(--border-radius);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            transform: translateY(100px);
            opacity: 0;
            transition: all 0.3s;
            z-index: 200;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .notification.show {
            transform: translateY(0);
            opacity: 1;
        }
        
        .stats {
            display: flex;
            gap: 15px;
            margin-top: 20px;
            flex-wrap: wrap;
        }
        
        .stat-card {
            background: rgba(52, 152, 219, 0.15);
            border-radius: var(--border-radius);
            padding: 15px;
            flex: 1;
            min-width: 200px;
            text-align: center;
            border: 1px solid var(--border-color);
        }
        
        .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: var(--primary-color);
            margin-bottom: 5px;
        }
        
        .stat-label {
            font-size: 14px;
            color: #bbb;
        }
        
        .feature-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }
        
        .feature {
            background: rgba(155, 89, 182, 0.15);
            border-radius: var(--border-radius);
            padding: 15px;
            border: 1px solid var(--border-color);
        }
        
        .feature h3 {
            color: var(--accent-color);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        @media (max-width: 768px) {
            .theme-card {
                width: calc(50% - 10px);
            }
            
            .main-content {
                flex-direction: column;
            }
        }
        
        @media (max-width: 480px) {
            .theme-card {
                width: 100%;
            }
            
            .controls {
                flex-direction: column;
            }
            
            .logo h1 {
                font-size: 20px;
            }
            
            .tagline {
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <div class="logo">
                <div class="logo-icon">C</div>
                <h1>CodeX</h1>
            </div>
            <div class="tagline">支持多种编程语言的强大代码渲染器</div>
        </div>
    </header>
    
    <div class="container">
        <div class="main-content">
            <div class="editor-panel">
                <div class="panel-header">
                    <div class="panel-title">代码编辑器</div>
                </div>
                
                <div class="controls">
                    <select id="language-select">
                        <option value="c">C</option>
                        <option value="cpp">C++</option>
                        <option value="csharp">C#</option>
                        <option value="python">Python</option>
                        <option value="r">R</option>
                        <option value="vbscript">VBScript</option>
                        <option value="batch">Batch</option>
                        <option value="java">Java</option>
                        <option value="javascript" selected>JavaScript</option>
                        <option value="html">HTML</option>
                        <option value="css">CSS</option>
                        <option value="less">Less</option>
                        <option value="xml">XML</option>
                        <option value="sql">SQL</option>
                        <option value="go">Go</option>
                        <option value="fortran">Fortran</option>
                        <option value="vue">Vue</option>
                        <option value="perl">Perl</option>
                        <option value="ada">Ada</option>
                        <option value="kotlin">Kotlin</option>
                        <option value="x86asm">Assembly</option>
                        <option value="vbnet">Visual Basic</option>
                    </select>
                    
                    <button id="render-btn">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M5 12l5 5L19 7"></path>
                        </svg>
                        渲染代码
                    </button>
                    <button id="reset-btn" class="reset-btn">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path>
                            <path d="M3 3v5h5"></path>
                        </svg>
                        重置
                    </button>
                </div>
                
                <textarea id="code-input" placeholder="在此输入代码...">// CodeX - 多功能代码渲染器
function greet(name) {
  return `Hello, ${name}!`;
}

class Calculator {
  constructor() {
    this.result = 0;
  }
  
  add(a, b) {
    return a + b;
  }
  
  subtract(a, b) {
    return a - b;
  }
}

const calc = new Calculator();
console.log(greet("CodeX User"));
console.log("5 + 3 =", calc.add(5, 3));</textarea>
            </div>
            
            <div class="preview-panel">
                <div class="panel-header">
                    <div class="panel-title">渲染结果</div>
                    <button class="copy-btn">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
                            <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
                        </svg>
                        复制代码
                    </button>
                </div>
                
                <pre><code id="output"></code></pre>
            </div>
        </div>
    
        
        <div class="theme-preview-header">
            <div class="panel-header">
                <div class="panel-title">主题选择</div>
            </div>
        </div>
        
        <div class="theme-preview" id="theme-preview-container">
            <!-- 主题卡片会通过JS动态生成 -->
        </div>
      
    
    <div class="notification" id="notification">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
            <polyline points="22 4 12 14.01 9 11.01"></polyline>
        </svg>
        代码已复制到剪贴板！
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/cpp.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/csharp.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/python.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/vbscript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/dos.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/r.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/less.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/xml.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/sql.min.js"></script>
    <!-- 新增语言支持 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/go.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/fortran.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/perl.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/ada.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/kotlin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/x86asm.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/vbnet.min.js"></script>
    
    <script>
        // 暗黑主题列表（已删除所有base16主题）
        const themes = [
            "a11y-dark", "agate", "an-old-hope", "androidstudio", 
            "atom-one-dark", "codepen-embed", "dark", "devibeans", 
            "far", "felipec", "github-dark", "github-dark-dimmed", 
            "gml", "gradient-dark", "hybrid", "ir-black", 
            "isbl-editor-dark", "kimbie-dark", "lioshi", "monokai", 
            "monokai-sublime", "night-owl", "nnfx-dark", "nord", 
            "obsidian", "panda-syntax-dark", "paraiso-dark", "pojoaque", 
            "qtcreator-dark", "rainbow", "shades-of-purple", "srcery", 
            "stackoverflow-dark", "sunburst", "tomorrow-night-blue", 
            "tomorrow-night-bright", "tokyo-night-dark", "vs2015", "xt256"
        ];
        
        // 主题对应的预览颜色
        const themeColors = {
            "a11y-dark": "#2b2b2b",
            "agate": "#333",
            "an-old-hope": "#1c1d21",
            "androidstudio": "#282b2e",
            "atom-one-dark": "#282c34",
            "codepen-embed": "#1e1f29",
            "dark": "#2d2d2d",
            "devibeans": "#2d2d2d",
            "far": "#2d2d2d",
            "felipec": "#2d2d2d",
            "github-dark": "#0d1117",
            "github-dark-dimmed": "#0d1117",
            "gml": "#222",
            "gradient-dark": "#1e1e1e",
            "hybrid": "#1d1f21",
            "ir-black": "#000",
            "isbl-editor-dark": "#404040",
            "kimbie-dark": "#221a0f",
            "lioshi": "#303030",
            "monokai": "#272822",
            "monokai-sublime": "#23241f",
            "night-owl": "#011627",
            "nnfx-dark": "#333",
            "nord": "#2e3440",
            "obsidian": "#293134",
            "panda-syntax-dark": "#292a2d",
            "paraiso-dark": "#2f1e2e",
            "pojoaque": "#1c1c1c",
            "qtcreator-dark": "#000000",
            "rainbow": "#474949",
            "shades-of-purple": "#2d2b55",
            "srcery": "#1c1b19",
            "stackoverflow-dark": "#1c1c1c",
            "sunburst": "#000",
            "tomorrow-night-blue": "#002451",
            "tomorrow-night-bright": "#000",
            "tokyo-night-dark": "#1a1b26",
            "vs2015": "#1e1e1e",
            "xt256": "#000"
        };
        
        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            const codeInput = document.getElementById('code-input');
            const languageSelect = document.getElementById('language-select');
            const renderBtn = document.getElementById('render-btn');
            const resetBtn = document.getElementById('reset-btn');
            const copyBtn = document.querySelector('.copy-btn');
            const output = document.getElementById('output');
            const notification = document.getElementById('notification');
            const themeContainer = document.getElementById('theme-preview-container');
            const themeLink = document.getElementById('highlight-theme');
            
            // 初始化主题预览
            themes.forEach(theme => {
                const card = document.createElement('div');
                card.className = 'theme-card';
                card.dataset.theme = theme;
                
                const previewBox = document.createElement('div');
                previewBox.className = 'theme-preview-box';
                previewBox.style.backgroundColor = themeColors[theme] || '#333';
                
                const themeName = document.createElement('div');
                themeName.className = 'theme-name';
                themeName.textContent = theme;
                
                card.appendChild(previewBox);
                card.appendChild(themeName);
                themeContainer.appendChild(card);
                
                // 设置第一个主题为默认选中
                if (theme === 'github-dark') {
                    card.classList.add('active');
                }
                
                // 主题选择事件
                card.addEventListener('click', function() {
                    document.querySelectorAll('.theme-card').forEach(c => {
                        c.classList.remove('active');
                    });
                    this.classList.add('active');
                    
                    // 更新主题
                    const themeFileName = this.dataset.theme.toLowerCase().replace(/\//g, '-');
                    themeLink.href = `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/${themeFileName}.min.css`;
                    
                    // 重新渲染代码
                    renderCode();
                });
            });
            
            // 渲染代码
            function renderCode() {
                const code = codeInput.value;
                const language = languageSelect.value;
                
                output.textContent = code;
                output.className = '';
                output.classList.add('language-' + language);
                
                hljs.highlightElement(output);
            }
            
            // 初始渲染
            renderCode();
            
            // 事件监听
            renderBtn.addEventListener('click', renderCode);
            
            resetBtn.addEventListener('click', function() {
                codeInput.value = '';
                renderCode();
            });
            
            copyBtn.addEventListener('click', function() {
                const textarea = document.createElement('textarea');
                textarea.value = codeInput.value;
                document.body.appendChild(textarea);
                textarea.select();
                document.execCommand('copy');
                document.body.removeChild(textarea);
                
                // 显示通知
                notification.classList.add('show');
                setTimeout(() => {
                    notification.classList.remove('show');
                }, 2000);
            });
            
            // 动态改变语言时重新渲染
            languageSelect.addEventListener('change', renderCode);
        });
    </script>
</body>
</html>